<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet/less" href="../common.less"><!--公共样式，清除样式 -->
  <link rel="stylesheet/less" href="./index.less" /><!--独自样式 -->
  <script src="../assets/less-4.1.3.js"></script>
  <title>预约设计</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="../assets/logo.png" alt="Logo" class="d-inline-block align-text-top">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" href="../index.html">首页</a>
            <a class="nav-link " href="../about">关于我们</a>
            <a class="nav-link " href="../product">产品中心</a>
            <a class="nav-link active" href="../appointment">预约设计</a>
            <a class="nav-link" href="../news">新闻资讯</a>
            <a class="nav-link" href="../service">服务平台</a>
            <a class="nav-link" href="../contact">联系我们</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <div class="banner">
    <img src="./images/banner.png" class="d-block w-100" alt="...">
  </div>

  <!-- DESIGNER -->
  <div class="designer">
    <div class="head">
      <h1 class="text-center">DESIGNER</h1>
      <span>精牌设计师</span>
    </div>
    <div class="container">
      <div class="content row">
        <div class="col-md-4 col-8 mx-auto mb-3 mb-md-0 item">
          <img src="./images/designer1.png" class="d-block w-100" alt="...">
          <img src="./images/designer_icon1.png" class="d-block w-50 h_icon" alt="...">
          <span class="name">何飞</span>
          <span class="info">擅长风格：简欧，美式，北欧</span>
        </div>
        <div class="col-md-4 col-8 mx-auto mb-3 mb-md-0 item">
          <img src="./images/designer2.png" class="d-block w-100" alt="...">
          <img src="./images/designer_icon2.png" class="d-block w-50 h_icon" alt="...">
          <span class="name">Lucy</span>
          <span class="info">擅长风格：北欧</span>
        </div>
        <div class="col-md-4 col-8 mx-auto mb-3 mb-md-0 item">
          <img src="./images/designer3.png" class="d-block w-100" alt="...">
          <img src="./images/designer_icon3.png" class="d-block w-50 h_icon" alt="...">
          <span class="name">李云</span>
          <span class="info">擅长风格：美式，北欧</span>
        </div>
        <div class=" col-12">
          <span class="btn">查看更多</span>
        </div>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <div class="row">
          <div class="col-md-4 text-center d-flex align-items-center justify-content-center mb-4 mb-md-0">
            <img src="./images/designer4.png" class="img-fluid" alt="">
          </div>
          <div class="col-md-8 info text-center text-md-start">
            <h6>设计大咖</h6>
            <span class="name">朱超（设计总监）</span>
            <h5>个人成就</h5>
            <p>
              2012年“世茂峰荟”作品在第二届国际环境艺术创新设计大赛中获三等奖.
              2015获得香港设计协会终身奖.
            </p>
            <h5>设计理念</h5>
            <p>当下，消费者对于个性化的追求逐步高涨，“消费者不再喜欢千篇一律的设计，他们更喜欢有独特
              个性的设计。”我很愿意帮助他们完成个性家居的改造,设计风格注重中国传统文化，天人居和合一.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- SERVICE -->
  <div class="service">
    <div class="head">
      <h1 class="text-center">SERVICE</h1>
      <span>设计师免费服务</span>
    </div>
    <div class="container">
      <div class="row content">
        <div class="col-xl-4 col-sm-6 col-10 mx-auto">
          <img src="./images/service1.png" class="d-block w-100 h-100" alt="...">
        </div>
        <div class="col-xl-4 col-sm-6 col-10 mx-auto middle">
          <h1>一键预约设计师</h1>
          <input type="text" name="name" id="" placeholder="您的真实姓名:">
          <input type="phone" name="phone" id="" placeholder="您的联系手机:">
          <textarea name="address" id="address" placeholder="请输入详细地址:"></textarea>
          <button>预约免费设计</button>
        </div>
        <div class="col-xl-4 col-11 col-md-8 col-sm-10 mt-4 mt-xl-10 mx-auto right">
          <div class="box">
            <h1>最新预约客户</h1>
            <div class="text">
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
              <div class="item">
                <span class="name">河南郑州市胡女士&nbsp;&nbsp;</span>
                <span class="date">2018-03-12&nbsp;&nbsp;</span>
                <span class="info">已申请上</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- CASE -->
<div class="case">
  <div class="head">
    <h1 class="text-center">case</h1>
    <span>客户案例</span>
  </div>
  <div class="container">
    <div class="row content">
      <div class="col-md-4 col-10 text-center text-md-start mx-auto item">
        <img src="./images/case1.png" alt="">
        <span class="name">床+床头柜—象牙白</span>
        <span class="info mb-4 mb-md-0">20-24m2/混搭系/现代简约</span>
      </div>
      <div class="col-md-4 col-10 text-center text-md-start mx-auto item">
        <img src="./images/case2.png" alt="">
        <span class="name">衣柜+白蜡木</span>
        <span class="info mb-4 mb-md-0">20-24m2/深色系/现代简约</span>
      </div>
      <div class="col-md-4 col-10 text-center text-md-start mx-auto item">
        <img src="./images/case3.png" alt="">
        <span class="name">衣柜+柚木</span>
        <span class="info mb-4 mb-md-0">20-16m2/深色系/现代简约</span>
      </div>
    </div>
  </div>
</div>

  <footer>
    <div class="container top">
      <div class="row">
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">关于我们</span>
          <a href="#">公司简介</a>
          <a href="#">文化产品</a>
          <a href="#">发展历程</a>
          <a href="#"></a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">产品中心</span>
          <a href="#">现代都市</a>
          <a href="#">折叠城市</a>
          <a href="#">清风物语</a>
          <a href="#">落落星辰</a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">预约设计</span>
          <a href="#">精牌设计</a>
          <a href="#">设计申请</a>
          <a href="#">客服案例</a>
          <a href="#"></a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">新闻资讯</span>
          <a href="#">品牌咨询</a>
          <a href="#">热门观点</a>
          <a href="#">家居动态</a>
          <a href="#">精彩视频</a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">服务平台</span>
          <a href="#">理念服务</a>
          <a href="#">服务支持</a>
          <a href="#">服务承诺</a>
          <a href="#">在线保修</a>
        </div>
        <div class="right col-xl-4 col-lg-4 col-md-4 col-sm-4 col-6   mx-auto">
          <span class="title">联系我们</span>
          <div class="info">
            <div class="item">
              <img src="../assets/footer_icon1.png" alt="">
              <span>河南省-郑州高新区-万仙山-万仙洞</span>
            </div>
            <div class="item">
              <img src="../assets/footer_icon2.png" alt="">
              <span>110-123456789</span>
            </div>
            <div class="item">
              <img src="../assets/footer_icon3.png" alt="">
              <span>www.110.com</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="container bottom">
      <div class="row">
        <div class="left col-lg-8 text-center text-lg-start">
          © 2017姿在家家居用品股份有限公司版权所有法 律 声 明 及 隐 私 权 政 策 · 知 识 产 权新ICP备 05003
        </div>
        <div class="right col-lg-4 text-center text-lg-start">
          <span>友情链接：</span><img src="../assets/footer_icons.png" alt="">
        </div>
      </div>
    </div>
  </footer>
  <script src="../bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>